<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>支付方式</title>
		<link href="../css/common.css" rel="stylesheet">
		<link href="../plugin/webuploader/webuploader.css" rel="stylesheet">
		<link rel="stylesheet" href="../carts/css/carts.css" />
		<link href="../css/base.css" rel="stylesheet">
		<link href="css/orderCompletion.css" rel="stylesheet">
		<style>
			.order_cash_box {
    			width: 1160px;
			}
			section .pay-moment > .pay-moment-body{
				padding-top:0;
			}
			section .pay-moment > .pay-moment-body li{
				margin-top:15px;
				margin-left: 0;
				margin-right: 15px;
				cursor: pointer;
				line-height: 60px;
				text-align: center;
			}
		</style>
	</head>

	<body>

		<header id="header"></header>
		<div id="nav-header">
			<div class="show-box" style="width: 1200px;margin: 0 auto">
				<div class="main-head">
					<span class="cart-logo" onclick="location.href='../view/index.html'"></span>

				</div>

				<p class="my-cart"> 支付方式</p>

				<div class="pay-methods">
					<span class="pay-login-name"></span><em>|</em><span>支付方式</span>
				</div>
				<div class="ZZHT-clear"></div>
			</div>

		</div>
		<section class="ZZHT-container">
			<!-- 支付方式-->
			<div class="pay-moment">
				<p class="pay-moment-header"> 支付方式</p>
				<ul class="pay-moment-body clearfix">
					<li v-for="(m,i) in imgArr" :class="[m.name,cur==m.val?'border-active':'']" @click="cur=m.val" style="display: none;">
						<template v-if="m.img">
							<img v-if="m.img" :src="m.img" alt="">
						</template>
						<template v-else>
							{{m.val}}
						</template>
					</li>
				</ul>
				<div class="line" style="width: 100%"></div>
				<form>
					<!--现金支付-->
					<div class="pay-detail" v-show="cur=='现金账户'">
						<p><span class="count-header">现金账户余额</span> <span class="count-money"> {{account.cash | formatMoney}}</span></p>
						<p><span class="count-header">账户积分</span> <span class="count-money">{{account.score}}</span></p>
						<p><span class="count-header">本次扣款</span> <span class="count-money"> {{needPay.moneyPay}}</span></p>
						<p><span class="count-header">本次获得积分</span> <span class="count-money"> {{invoiceClient.defaultScore}}</span></p>
						<p><span class="count-header">交易密码</span><input type="password" v-model="password" required maxlength="6" @keyup.enter="cashPay">
							<a style="vertical-align: bottom" href="#none" @click="showPassword()">忘记密码?</a>
						</p>
						<p><span class="count-header"></span> <input type="button" value="确认" @click="cashPay"></p>
					</div>
					<!--华宝支付-->
					<div class="pay-detail" v-show="cur=='华宝'">
						<p><span class="count-header">华宝数量</span> <span class="count-money"> {{account.huabao}}</span></p>
						<p><span class="count-header">本次扣款</span> <span class="count-money"> {{needPay.hbPay}}</span></p>
						<p><span class="count-header">服务费</span> <span class="count-money"> {{invoiceClient.allPrice | formatMoney}}</span></p>
						<!--<p><span class="count-header">本次获得积分</span> <span class="count-money"> {{invoiceClient.defaultScore}}</span></p>-->
						<p><span class="count-header">交易密码</span><input type="password" v-model="password">
							<a style="vertical-align: bottom" href="#none" @click="showPassword()">忘记密码?</a>
						</p>
						<p><span class="count-header"></span> <input type="button" value="确认" @click="cashPay"></p>
					</div>
					<!--线下支付-->
					<div class="pay-detail" v-show="cur=='线下支付'">
						<div class="order_cash_box">
							<div class="total_price">{{needPay.moneyPay}}</div>
							<div class="tab_slide">
								<form>
									<div class="tab_cont" style="padding: 30px 50px;">
										<!-- 线下支付 -->
										<div class="tab_item">
											<div class="ZZHT-f999 state"></div>
											<div class="clearfix">
												<div class="fl left" id="bank">
													<div class="clearfix">
														<div class="fl">收款银行</div>
														<div class="fr v-ellipsis ">{{bank.rechargeBankName}}</div>
													</div>
													<div class="clearfix">
														<div class="fl">支行</div>
														<div class="fr v-ellipsis">{{bank.rechargeBranchBank}}</div>
													</div>
													<div class="clearfix">
														<div class="fl">收款人</div>
														<div class="fr v-ellipsis">{{bank.rechargeReceiver}}</div>
													</div>
													<div class="clearfix">
														<div class="fl">收款账号</div>
														<div class="fr v-ellipsis">{{bank.rechargeNo}}</div>
													</div>
												</div>
												<div class="fl right">
													<div class="clearfix upload" style="border-bottom: 1px solid #eee;">
														<div class="fl">转账凭证</div>
														<img src="../img/bgimg_error_spcc.png" alt="" class="bankImg" />
														<div class="fr v-ellipsis ZZHT-align-right">
															<span class="upload-btn webuploader-container" id="adFilePicker1"><div class="webuploader-pick">上传</div>
													<div id="rt_rt_1cgst53ns1ksa189n1qkt65bju81" style="position: absolute; top: -13px; left: 0px; width: 120px; height: 44px; overflow: hidden; bottom: auto; right: auto;">
														<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
														<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
													</div>
												</span>
															<input type="hidden" class="input-file bz upload-files" id="orderImg" name="orderImg" value="">
															<span id="urlLabel" style="font-size: 12px;vertical-align: top;" class="ZZHT-f999">请选择图片</span>
														</div>
													</div>
													<div class="clearfix" style="border-bottom: 1px solid #eee;">
														<textarea maxlength="200" rows="3" id="remark" name="remark" class="ZZHT-f999 remark" placeholder="请填写备注（选填）"></textarea>
													</div>
												</div>
												<div class="fl" style="margin-top: 164px;">
													<input id="offlineSubmit" class="fredBtn" type="button" value="提交">
												</div>
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</form>
			</div>

		</section>

		<div id="ck1"></div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-resource.min.js"></script>
		<script type="text/javascript" src="../js/qrcode.js"></script>
		<script type="text/javascript" src="../plugin/layer/layer.js"></script>
		<script src="../plugin/webuploader/webuploader.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/common_view.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script>
			//支付方式  2 现金账户支付 3开元宝支付 4第三方支付  6开元宝营业额

			var vm = new Vue({
				el: ".ZZHT-container",
				data: {
					account: {
						cash: 0, //现金
						huabao: 0, //华宝
						score: 0
					},
					password: '',
					cur: '现金账户',
					orderArr: [],
					invoiceClient:{},
					needPay: { //本次扣款 现金 华宝 华宝货款
						moneyPay:0,
						hbPay:0,
						hbhkPay:0,
					},
					orderIdArr: [],
					imgArr: [
						{
							img: 'img/xj.png',
							name: 'type_2',
							val:'现金账户'
						},
						{
							img: 'img/hb.png',
							name: 'type_3',
							val:'华宝',
						},
//						{
//							img: 'img/wx.png',
//							name: 'type_4',
//							val:'微信',
//						},
//						{
//							img: 'img/alipay.png',
//							name: 'type_4',
//							val:'支付宝',
//						},
//						{
//							img: 'img/kj.png',
//							name: 'type_4',
//							val:'快捷支付',
//						},
//						{
//							img: 'img/wg.png',
//							name: 'type_4',
//							val:'网关支付',
//						},
						{
							img: '',
							name: 'type_1',
							val:'线下支付',
						},
						{
							img: '',
							name: 'type_6',
							val:'华宝营业额',
						},
					]

				},
				mounted: function() {
					this.$nextTick(function() {
						this.getCount()
						//this.getProductOrder()
					})
				},

				filters: {
					formatMoney: function(val) {
						return '￥' + val
					},

				},
				computed: {

				},
				methods: {
					//获取现金以及华宝余额
					getCount: function() {
						// console.log(  this.formatDate(new Date()))
						this.$http.get(SURL + '/webAccount/getAccount', {
							params: {
								userId: localStorage.userId
							}
						}).then(function(res) {
							if(res.body.messageCode == '200') {
								this.account.score = res.body.entity.score;
								this.account.cash = res.body.entity.cash;
								this.account.huabao = res.body.entity.kaiyuan;
							}
						})
					},
					//现金支付 1:线下现金支付 2 现金账户支付 3开元宝支付 4第三方支付 5混合支付 6开元宝营业额
					pay: function(params) {
						var pattern = /^\d{6}$/;
						if(pattern.test(this.password)) {

							this.$http.post(SURL + 'webAccount/sale', params, {
								emulateJSON: true
							}).then(function(res) {
								// console.log(res);
								if(res.body.messageCode == '200') {
									if(res.body.entity.code == '01') {
										layer.alert(res.body.entity.msg);
										setTimeout(function() {
											location.href = "./orderCompletionOver.html"
										}, 2000)
									} else {
										layer.alert(res.body.entity.msg)
									}

								}
							})
						} else {
							layer.alert('请填写6位正确密码')
						}

					},
					cashPay: function() {
						var params = {
							userId: localStorage.userId,
							payPwd: this.password,
							orderIdList: this.orderIdArr.toString(),
							payType: 1,
							payMoney: this.invoiceClient.allPrice,
							feeMoney: 0
						};
						this.pay(params)
					},
					huabaoPay: function() {
						var params = {
							userId: localStorage.userId,
							payPwd: this.password,
							orderIdList: this.orderIdArr.toString(),
							payType: 2,
							payMoney: this.invoiceClient.allPrice,
							feeMoney: 0
						};
						this.pay(params)
					},
					restOrder: function() {
						this.$http.get(SURL + 'orders/')
					},
					formatDate: function(date, db) {
						var d = date ? new Date(date) : new Date();
						db = db ? db : false;
						var w = ["日", "一", "二", "三", "四", "五", "六"];
						var t = {
							"Y": d.getFullYear(),
							"M": d.getMonth() + 1,
							"D": d.getDate(),
							"W": d.getDay(),
							"h": d.getHours(),
							"m": d.getMinutes(),
							"s": d.getSeconds()
						};
						d.setMonth(t.M);
						d.setDate(0);
						t["x"] = d.getDate();
						t["w"] = w[t.W];

						if(db) {
							$.each(t, function(i, o) {
								if((i === "M" || i === "D" || i === "h" || i === "m" || i === "s") && o.toString().length == 1) {
									t[i] = "0" + o.toString();
								}
							});
						}

						return t;
					},
				}

			})

			$(".order-fold").on('click', function() {
				$(this).find('.icons').toggleClass('icon-active')
				$('.zdie').slideToggle("slow");
			})

			$('.pay-methods').find('.pay-login-name').html(localStorage.loginName);

			$(function() {
				var payData = JSON.parse(localStorage.payData);
				console.log(payData);
				var typeList = payData.allowPayType.split(',');
				$.each(typeList, function(i, v) {
					$('.type_' + v).show();
				})

//				var money = gup('money');
//				var orderNO = gup('orderNO');
//				$('.total_price').html('&yen;' + money);

				$.ajax({ //获取汇款银行信息
					type: "get",
					url: SURL + "webAccount/clickUnderLinePay",
					async: false,
					success: function(res) {
						console.log(res);
						vm.bank = res.entity;
					}
				});

				ZZHT.upload({
					pick: '#adFilePicker1',
					formData: {
						dir: 'goods',
						isWatermark: 1,
						isThumb: 1
					},
					accept: {
						extensions: 'gif,jpg,jpeg,bmp,png',
						mimeTypes: 'image/*'
					},
					callback: function(f) {
						var json = f;
						console.log(f);
						if(json.messageCode == '200') {
							id = this.pick;
							$('#orderImg').val(json.entity);
							$('.bankImg').attr('src', json.entity);
						}
					},
				});

				$('.fredBtn').click(function() {
					var img = $('#orderImg').val();
					if(img) {
						$.ajax({ //获取汇款银行信息
							type: "get",
							url: SURL + "webAccount/underLinePay",
							data: {
								"id": gup('id'),
								"orderImg": img,
								"remark": $('#remark').val()
							},
							success: function(res) {
								console.log(res);
								if(res.messageCode == '200') {
//									location.href = 'ing.html?money=' + money + '&orderNO=' + orderNO;
								} else {
									layer.msg(res.message);
								}
							}
						});
					} else {
						layer.msg('请上传转账凭证');
					};
				})
			})
			
			//设置支付密码弹窗
			function showPassword() {
			    layer.open({
			        type: 2,
			        title: '设置交易密码',
			        shadeClose: true,
			        shade: 0.8,
			        area: ['600px','550px'],
			        content: '../userCenter/7-1.html?from=payType',
//			        btn: ['继续支付'],
			        yes: function (index, layero) {
			            layer.close(index);
			        }
			    });
			}
		</script>
	</body>

</html>